<template>
<div class="shop">
  <div class="title">积分兑换列表</div>
  <el-form :model="formData" label-width="80px" ref="ruleForm" label-position="left">
    <el-row>
      <el-col :lg="8" :md="12" :sm="24" v-for="item in list" :key="item.id" class="mg">
        <el-radio v-model="formData.check" :label="item.id" border :disabled="item.close === true || item.residue <= '0' ">{{item.name}}(剩余：{{item.residue}}) [积分：{{item.scale}}]</el-radio>
      </el-col>
    </el-row>
  </el-form>

  <el-button type="primary" class="submit-btn" @click="submitForm()">提 交 兑换</el-button>
</div>

</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {ref,onMounted} from "vue";
import {buyCommodity, getCommodityList} from "../../api/expense";
import {error, success} from "../../utils/message";


export default {
  name: "Shop",
  setup(){
    const state = reactive({
      list : [],
      count : 0,
      formData:{
        check : ref(1)
      },
    })
    const methods = {
      async getGoods(){

        let resp = await getCommodityList()
        state.list = resp.data.data;
        state.count = resp.data.count
      },
      async submitForm(){
        let resp = await buyCommodity(state.formData)

        if(resp.code === 200){
          success(resp.message)
        }else {
          error(resp.message)
        }
      }
    }
    onMounted(()=>{
      methods.getGoods();
    })
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
.shop{
  width: 100%;
  display: block;
  clear: both;
}
.title{
  --el-descriptions-header-margin-bottom: 20px;
  --el-descriptions-title-font-size: 16px;
  --el-descriptions-table-border: 1px solid var(--el-border-color-lighter);
  --el-descriptions-item-bordered-label-background: #fafafa;
  box-sizing: border-box;
  /*font-size: var(--el-font-size-base);*/
  color: var(--el-text-color-primary);
  font-size: var(--el-descriptions-title-font-size);
  font-weight: 700;
}
.item{
  width: 50%;
  float: left;
  display: block;
}
.submit-btn{
  display: block;
  width: 100%;
}
.mg{
  margin: 5px 0;
}
</style>